<template>
  <div id="houseBox">
    <!-- 搜索栏 -->
    <div>
      <el-form ref="search" :model="search">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item prop="buildingName">
              <el-input
                placeholder="楼盘名称"
                v-model="search.buildingName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="houseSerialNumber">
              <el-input
                placeholder="房源编号"
                v-model="search.houseSerialNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="toward">
              <el-input placeholder="朝向" v-model="search.toward"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="phone">
              <el-input
                placeholder="业主电话"
                v-model="search.phone"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" icon="el-icon-search" @click="searchBtn"
            >搜索</el-button
          >
          <el-button @click="resetForm('search')">清空</el-button>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{ color: 'black', background: '#f4f6f5' }"
      >
        <el-table-column label="房源编号" width="180">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false">{{
              scope.row.houseSerialNumber
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="houseInformation" label="房源信息" width="180">
        </el-table-column>
        <el-table-column label="图">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="toImgMap(scope.row)"
              >{{ scope.row.indoorFigure }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column label="委托人">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false">{{
              scope.row.owner
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="checkingTime" label="委托时间">
        </el-table-column>
        <el-table-column prop="inquiries" label="咨询量"> </el-table-column>
        <el-table-column prop="houseView" label="看房量"> </el-table-column>
        <!-- <el-table-column prop="state" label="状态"> </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, scope.$index)"
              type="text"
              size="small"
              >查看详情</el-button
            >
            <el-button
              style="color: #fb9678"
              type="text"
              size="small"
              @click="delteBtn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码 -->

    <div style="text-align: right;margin-top: 20px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        hide-on-single-page
        @current-change="changePage"
      >
      </el-pagination>
    </div>

    <!-- 房源详情模态框 -->
    <el-dialog title="房源详情" :visible.sync="dialogFormVisible">
      <el-form :model="dataInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区地址：" :label-width="formLabelWidth">
              <div v-text="dataInfo.buildingAddress" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="小区名称：" :label-width="formLabelWidth">
              <div v-text="dataInfo.buildingName" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="建筑类型：" :label-width="formLabelWidth">
              <div v-text="dataInfo.buildingCategory" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="开发商：" :label-width="formLabelWidth">
              <div v-text="dataInfo.developers" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="开盘日期：" :label-width="formLabelWidth">
              <div v-text="dataInfo.openTime" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="绿化率：" :label-width="formLabelWidth">
              <div v-text="dataInfo.afforestationRate" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="容积率：" :label-width="formLabelWidth">
              <div v-text="dataInfo.plotRatio" autocomplete="off"></div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物业公司：" :label-width="formLabelWidth">
              <div v-text="dataInfo.propertyCompany" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="物业费：" :label-width="formLabelWidth">
              <div v-text="dataInfo.propertyFee" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="建筑面积：" :label-width="formLabelWidth">
              <div v-text="dataInfo.coveredArea" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="土地面积：" :label-width="formLabelWidth">
              <div v-text="dataInfo.landArea" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="车位情况：" :label-width="formLabelWidth">
              <div v-text="dataInfo.parkingSituation" autocomplete="off"></div>
            </el-form-item>
            <el-form-item label="土地年限：" :label-width="formLabelWidth">
              <div v-text="dataInfo.landYear" autocomplete="off"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      limit: 5,
      page: 1,
      tableData: [],
      dataInfo: {},
      dialogFormVisible: false,
      formLabelWidth: "120px",
      search: {
        limit: this.limit,
        page: this.page,
        buildingName: "",
        houseSerialNumber: "",
        toward: "",
        phone: "",
      },
    };
  },
  methods: {
    /* 查看房源详情 */
    handleClick(row, index) {
      this.$axios({
        url: "/houseInfo/findDetail",
        method: "get",
        params: {
          id: row.id,
        },
      }).then((res) => {
        console.log(res);
        if (res.code === 0) {
          if (res.data !== null) {
            this.dataInfo = res.data;
            this.dialogFormVisible = true;
          } else {
            this.$message.warning("暂无数据！");
          }
        }
      });
    },
    /* 删除功能 */
    delteBtn(row) {
      this.$axios({
        url: "/houseInfo/delete",
        method: "get",
        // data: {
        //   id: id,
        // },
        params: {
          id: row.id,
        },
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        console.log(res);
      });
    },
    /* 房源列表数据 */
    showTable() {
      this.$axios({
        url: "/houseInfo/list",
        method: "get",
        params: {
          page: this.page,
          limit: this.limit,
          buildingName: this.search.buildingName,
          houseSerialNumber: this.search.houseSerialNumber,
          toward: this.search.toward,
          phone: this.search.phone,
        },
      }).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.total = res.count;
          this.tableData = res.data;
          this.tableData.forEach((item) => {
            item.indoorFigure = this.getImg(item.indoorFigure);
            item.checkingTime = this.getTime(item.checkingTime);
          });
        } else {
          this.$message.error("没查询到数据");
        }
      });
    },
    changePage(pageNow) {
      this.page = pageNow;
      // console.log(this.page);
      this.showTable();
    },
    searchBtn() {
      this.showTable();
      console.log(this.search);
    },
    resetForm(search) {
      this.$refs[search].resetFields();
      this.showTable();
    },
    /* 跳转图片详情 */
    toImgMap(row) {
      // console.log(typeof(row.indoorFigure))
      if (typeof row.indoorFigure === "number") {
        this.$router.push({
          path: "/main/houseimg",
          query: { houseSerialNumber: row.houseSerialNumber },
        });
        console.log("1111");
      } else {
        this.$message.warning("暂无照片");
        // console.log("2222");
      }
    },
    /* 把时间戳转换成日期 */
    getTime(t) {
      if (t === "") {
        return "";
      } else {
        let time = new Date(t).toLocaleDateString().split("/").join("-");
        return time;
      }
    },
    /* 判断是否有图片并转换成图片数 */
    getImg(img) {
      if (img !== "" && img !== null) {
        let b = img.indexOf("http:");
        if (b === 0) {
          let imgUrlList = img.split(",").length;
          return imgUrlList;
        } else {
          return "暂无照片";
        }
      } else {
        return "暂无照片";
      }
    },
  },
  created() {
    this.showTable();
  },
};
</script>

<style scoped>
#houseBox {
  width: 100%;
  height: 100%;
}
.el-button {
  width: auto !important;
}
</style>